<template>
    <div class="common-layout">
      <el-container>
        <el-header style="padding: 0;">
          <ProblemHeaderVue/>
        </el-header>
        <el-container>
          <el-main style=" padding: 0; padding-top: 5px;">
            <Split class="page" ratio="1/1">
              <template #one>
                <div class="left">
                  <el-card shadow="hover" :body-style="{minHeight:'600px'}">
                    <titleInfo/>
                  </el-card>
                </div>
              </template>

              <template #two>
                <Split class="right" horizontal ratio="8/1">
                  <template #one>
                    <div class="up" >
                          <EditCodeVue/>
                    </div>
                  </template>
                  <template #two>
                    <div class="down">
                      <el-card :body-style="{'min-height':'400px',padding:'10px'}">
                        <terminalVue/>
                      </el-card>
                    </div>
                  </template>
                </Split>
              </template>
          </Split>
            
          </el-main>
        </el-container>
        <el-footer>
           <footerVue/>
        </el-footer>
      </el-container>
    </div>
  </template>
  

<script setup>

import footerVue from '@/components/footer/Footer.vue'
import Split from '@/components/Problem/ProblemSplit.vue'
import ProblemHeaderVue from '@/components/Problem/ProblemHeader.vue'
import EditCodeVue from '@/components/Problem/EditCode.vue'
import titleInfo from '@/components/Problem/title/titleInfo.vue'
import terminalVue from '@/components/Problem/terminal/terminal.vue'



</script>

<style lang="scss">
  .page {
    height: 600px;
  .left {
    height: 100%;
    padding: 5px;
  
   
   
  }

  .right {
    height: 100%;
    .up {
      height: 100%;
      margin-top: 5px;
      background-color:var(--el-bg-header-color);
    }

    .down {
      min-height: 100%;
      
    }
  }
}

</style>